<template>
	<view class="app-public-real-name">
		<view class="e-p-20" v-if="!status">
			<view class="e-p-l-20 e-p-r-20 e-p-t-32 e-p-b-32">
				{{ $t('public.realNameTips') }}
			</view>
			<view class="bg-white white-box e-p-30 e-m-b-20">
				<view class="e-font-28 w-600 c-333 e-m-b-30">
					{{ $t('public.完善您的个人信息') }}
				</view>
				<view class="input-box e-flex">
					<view class="c-333 e-font-28 width-208">
						{{ $t('public.姓名') }}
					</view>
					<input class="e-flex-1" type="text" name="" id="" v-model="form.realName"
						:placeholder="$t('public.请输入姓名')">
				</view>
				<view class="input-box e-flex">
					<view class="c-333 e-font-28 width-208">
						{{ $t('public.手机号') }}
					</view>
					{{userInfo.phone || ""}}
				</view>
				<view class="input-box e-flex">
					<view class="c-333 e-font-28 width-208">
						验证码
					</view>
					<e-input v-model="form.code" border="none" placeholder="请输入验证码" />
					<e-code-button ref="eCodeRef" start-text="获取验证码" :change-text="('X秒重新获取')" :end-text="('重新获取')"
						size="small" type="primary" shape="circle" @click="getCode"></e-code-button>

				</view>
				<view class="input-box e-flex">
					<view class="c-333 e-font-28 width-208">
						{{ $t('public.身份证号码') }}
					</view>
					<input class="e-flex-1" type="text" name="" id="" v-model="form.idcard"
						:placeholder="$t('public.请输入本人身份证号')">
				</view>
		
			</view>
			<view class="bg-white white-box e-p-30 e-m-b-20">
				<view class="e-font-28 w-600 c-333 e-m-b-30">
					{{ $t('public.上传身份证正反面') }}
				</view>
				<view class="e-flex">
					<view class="e-flex-1 e-m-r-18 upload-box e-flex-xy-center" @tap="upload(0)">
						<image class="upload-image" v-if="imgList.length && imgList[0]" :src="$fullLink(imgList[0].url)"
							mode="aspectFit"></image>
						<image v-else class="upload-image-1" src="/pages/public/static/realName/upload.png"
							mode="widthFix">
						</image>
					</view>
					<view class="e-flex-1 upload-box e-flex-xy-center" @tap="upload(1)">
						<image class="upload-image" v-if="imgList.length && imgList[1]" :src="$fullLink(imgList[1].url)"
							mode="aspectFit"></image>
						<image v-else class="upload-image-1" src="/pages/public/static/realName/upload.png"
							mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view class="bg-white white-box e-p-30 e-m-b-80">
				<view class="e-font-28 w-600 c-333 e-m-b-30">
					{{ $t('public.请核实身份信息') }}
				</view>
				<view class="bg-f7 e-p-t-32 e-p-b-30 e-p-l-26">
					<view class="e-flex e-m-b-40">
						<view class="c-333 e-font-28 width-208">
							{{ $t('public.姓名') }}
						</view>
						<input type="text" name="" id="" v-model="form.realName" disabled>
					</view>
					<view class="e-flex e-m-b-40">
						<view class="c-333 e-font-28 width-208">
							{{ $t('public.手机号') }}
						</view>
						<input type="text" name="" id="" v-model="form.linkPhone" disabled>
					</view>
					<view class="e-flex">
						<view class="c-333 e-font-28 width-208">
							{{ $t('public.身份证号码') }}
						</view>
						<input type="text" name="" id="" v-model="form.idcard" disabled>
					</view>
				</view>
			</view>
			<view class="fixed-bottom bg-f6f7fb e-p-20">
				<view class="submit-btn fw-500 e-font-32 e-flex e-flex-xy-center c-white"
					:style="{ background: AppSkin.primary }" @tap="submit">
					{{ $t('public.提交信息') }}
				</view>
			</view>
		</view>
		<view class="e-p-20 e-flex e-flex-xy-center h-100" v-else>
			<view class="e-flex-y e-flex-xy-center" v-if="status === 1">
				<image class="img-320-224 e-m-b-20" src="/pages/public/static/realName/state1.png" mode=""></image>
				<view class="c-333 e-font-32">
					{{ $t('public.realNameTips1') }}
				</view>
			</view>
			<view class="e-flex-y e-flex-xy-center" v-else-if="status === 2">
				<image class="img-320-224 e-m-b-20" src="/pages/public/static/realName/state2.png" mode=""></image>
				<view class="c-333 e-font-32 e-m-b-32">
					{{ $t('public.realNameTips2') }}
				</view>
				<view class="c-999 e-font-32 e-m-b-32">
					{{ getRealName(form.realName) }}
				</view>
				<view class="c-999 e-font-32 e-m-b-32">
					{{ getIdCard(form.idcard) }}
				</view>
			</view>
			<view class="e-flex-y e-flex-xy-center" v-else>
				<image class="img-320-224 e-m-b-20" src="/pages/public/static/realName/state3.png" mode=""></image>
				<view class="c-333 e-font-32 e-m-b-32">
					{{ $t('public.realNameTips3') }}
				</view>
				<view class="e-m-b-40 c-999 e-font-32">
					{{ remark }}
				</view>
				<view class="e-m-t-40 reset-btn c-white e-font-30 e-flex e-flex-xy-center"
					:style="{ background: AppSkin.primary }" @tap="reset">
					{{ $t('public.重新认证') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { addAuthentication, authenLogn, uploadFilePath, type AuthenticationParams,authenSms } from '@/common/request/api'
	import { chooseImage } from '@/common/utils';
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const ctx = useCurrentInstance()
	const userStore = useUser()
const { userInfo, isLogin } = storeToRefs(useUser())
	const imgList = ref<{
		url: string,
		path: string
	}[]>([])
	const status = ref(0)
	const codeTips = ref('')
	
	const form = ref<AuthenticationParams>({
		idcard: '',
		realName: '',
		linkPhone: '',
		front: '',
		back: '',
		code:""

	})
	const remark = ref('')
	
const eCodeRef = ref(null)

	const getCode = () => {
		if (!userInfo.value.phone) {
			ctx.$toastApp('手机号不能为空')
			return
		}
		form.value.linkPhone = userInfo.value.phone
		authenSms(userInfo.value.phone).then(res => {
			eCodeRef.value?.start()
		})
	}

	

	const getRealName = (val: string) => {
		if (val.length > 2) {
			return val.substr(0, 1) + '*' + val.substr(val.length - 2, 1)
		} else {
			return val.substr(0, 1) + '*'
		}
	}
	const getIdCard = (val: string) => {
		return val.replace(/^(.{4})(?:\d+)(.{4})$/, "$1******$2")
	}

	const upload = (type:number) => {
		chooseImage({
			count: 1
		}).then(res => {
			if (res) {
				res.tempFiles.forEach(items => {
					uploadFilePath(items.tempFilePath).then(data => {
						imgList.value.splice(type, 1, {
							url: data.data.url,
							path: items.tempFilePath
						})
					})
				})

			}
		})

	}
	const submit = () => {
		if (!form.value.realName) {
			ctx.$toastApp(ctx.$t('public.请输入姓名'))
			return
		}
		if (!form.value.linkPhone) {
			ctx.$toastApp(ctx.$t('public.请输入本人实名认证的手机号'))
			return
		}
		if (!form.value.idcard) {
			ctx.$toastApp(ctx.$t('public.请输入本人身份证号'))
			return
		}
		if (imgList.value.length < 2) {
			ctx.$toastApp(ctx.$t('public.上传身份证正反面'))
			return
		}
		form.value.front = imgList.value[0] ? imgList.value[0].url : ''
		form.value.back = imgList.value[1] ? imgList.value[1].url : ''
		addAuthentication(form.value).then(res => {
			if (res.code == 200) {

				userStore.getUserInfo()
				setTimeout(() => {
					getData()
				}, 1500)
			}
		})
	}
	const reset = () => {
		form.value = {
			idcard: '',
			realName: '',
			linkPhone: '',
			front: '',
			back: ''
		}
		remark.value = ''
		status.value = 0
		imgList.value = []
	}

	const getData = () => {
		authenLogn().then(res => {
			if (res&&res.data) {
				status.value = res.data.status
				form.value.idcard = res.data.idcard
				form.value.linkPhone = res.data.linkPhone
				form.value.realName = res.data.realName
				remark.value = res.data.remark
			}
			
		})
	}
	getData()


</script>

<style lang="scss" scoped>
	@include appBem_b(public-real-name){
		padding-bottom:160rpx;
		.white-box {
			border-radius: 20rpx;
		}
		
		.input-box {
			height: 104rpx;
			box-shadow: inset 0px -1rpx 0px 0px #EDEDED;
		}
		
		.width-208 {
			flex: 0 0 208rpx;
		}
		
		.upload-box {
			height: 199rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
		}
		
		.bg-f7 {
			background: #F7F7F7;
			border-radius: 20rpx;
		}
		
		.submit-btn {
			height: 100rpx;
			border-radius: 50rpx;
		}
		
		.upload-image {
			height: 199rpx;
			width: 100%;
		}
		
		.upload-image-1 {
			width: 100rpx;
		}
		
		.img-320-224 {
			width: 120rpx;
			height: 120rpx;
		}
		
		.h-100 {
			height: 100vh;
		
		
		}
		
		.reset-btn {
			width: 278rpx;
			height: 90rpx;
			border-radius: 46rpx;
		}

	}
	.code-box {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #dfe3e6;
		.code-btn {
			height: 60rpx;
			line-height: 60rpx;
			letter-spacing: 2rpx;
			border-radius: 30px;
			margin: 0;
		}
	}
</style>